<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";

import { ShipDetail, ShipBootDetail } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,

      stepId: 1,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "船员列表", id: 2 },
      ],
      tableData: [],
      queryData: {
        shipowner_ship_id: this.$route.query.id,
        real_name: "",
        page: 1,
        per_page: 15,
      },
      total: 0,
      formData: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    deleteFn(id) {
      ElMessageBox.confirm("确定取消此船员关联本船舶吗?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data } = await ShipDel({
          shipowner_crew_id: id,
          shipowner_ship_id: this.detailId,
        });
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          this.getData();
        }
      });
    },
    changeFn(id) {
      this.$router.push({ path: "/flotBootAdd", query: { id: id } });
    },
    detailFn(id) {
      this.$router.push({
        path: "/signDetail",
        query: { id: id },
      });
    },
    getData() {
      ShipDetail({ shipowner_ship_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    getTable() {
      ShipBootDetail(this.queryData).then((res) => {
        if (res.data.code == 1) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
        }
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
    this.getTable();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船舶详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="stepId = item.id"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">船舶名称</div>
                  <div class="desText">{{ formData.ship_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶旗号</div>
                  <div class="desText">{{ formData.qh }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶呼号</div>
                  <div class="desText">{{ formData.hh }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">imo</div>
                  <div class="desText">{{ formData.imo }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶类型</div>
                  <div class="desText">{{ formData.cblx }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶航区</div>
                  <div class="desText">{{ formData.cbhq }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">载货量</div>
                  <div class="desText">{{ formData.zhl }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">造船时间</div>
                  <div class="desText">{{ formData.zcsj }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">所属船队</div>
                  <div class="desText">{{ formData.fleet_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>船员列表({{ total }})</div>
                <div class="serchRight">
                  <el-form class="flexCenter" :inline="true">
                    <el-form-item class="noBottom">
                      <el-input
                        v-model="queryData.real_name"
                        placeholder="请输入船员姓名"
                      />
                    </el-form-item>
                    <btn
                      value="搜索"
                      style="margin-top: 0"
                      @click="getData"
                    ></btn>
                  </el-form>
                </div>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="real_name"
                  show-overflow-tooltip
                  label="姓名"
                />
                <el-table-column
                  prop="mobile"
                  show-overflow-tooltip
                  label="手机号"
                />
                <el-table-column
                  prop="idcard"
                  show-overflow-tooltip
                  width="220"
                  label="身份证"
                />
                <el-table-column
                  prop="qwyx"
                  show-overflow-tooltip
                  label="船员薪资"
                >
                  <template #default="{ row }">
                    <span
                      >{{ row.qwyx
                      }}{{ row.qwyx_dw == 1 ? "元" : "美元" }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="zw" show-overflow-tooltip label="岗位" />
                <el-table-column
                  prop="sc_time"
                  width="120"
                  show-overflow-tooltip
                  label="上船时间"
                />
                <el-table-column prop="Name" width="140" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="detailFn(row.shipowner_crew_id)"
                      >
                        详情
                      </div>
                      <div
                        class="blueText ctrlText"
                        @click="changeFn(detailId)"
                      >
                        换员
                      </div>
                      <div
                        class="redText ctrlText"
                        @click="deleteFn(row.shipowner_crew_id)"
                      >
                        取关
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="getTable"
                  @current-change="getTable"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
